<template>
  <!-- 维保管理 -- 维保项目管理 -- 添加/编辑-->
  <div class="page-operate">
    <!-- 位置模块 -->
    <HeadTop></HeadTop>
    <div class="page-head">
      <span class="operate-text">{{title}}</span>
      <div class="operate-box">
        <button @click="upMaintainProject" class="submit">提交</button>
        <button @click="back()">关闭</button>
      </div>
    </div>
    <div class="content-area">
      <div class="main-content form-edit">
        <div class="page-form">
          <el-form class="my-form my-form-600" ref="myForm" :model="myForm" :rules="rules" label-width="120px"
                   size="medium">
            <el-form-item label="维保类型:" required prop="typeId">
              <el-select v-model="myForm.typeId" placeholder="--请选择维保类型--" clearable>
                <el-option v-for="(item,key,index ) in itemArr" :key="item.id" :label="item.name"
                           :value="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="维保项目:" required prop="item">
              <el-input v-model="myForm.item"></el-input>
            </el-form-item>
            <el-form-item label="维保要求:">
              <el-input type="textarea" class="my-area" placeholder="填写维保要求" v-model="myForm.requires"></el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>

</template>
<style lang="scss" type="text/scss">
  @import '../../../../style/entry/components/pageChildCommon';
</style>
<script>
  import com from "../../../../js/common"
  import HeadTop from "../../../../components/head-top/head-top"
  import {getMaintainProjectDetail, getMaintainType, maintainItemAdd, maintainItemEdit} from '@/api/getData'

  export default {
    data() {
      return {
        myForm: {
          item: '',
          requires: '',
          // score: '',
          id: '',
          typeId: ''
        },
        rules: {
          typeId: [
            {required: true, message: '请选择维保类型'}
          ],
          item: [
            {required: true, message: '请输入维保项目'}
          ]
        },
        itemArr: [],
        maintainProjectId: '',
        title: '添加维保项',
        type: 'add',
      };
    },
    components: {
      HeadTop
    },
    // 判断操作为添加/编辑
    mounted() {
      // 获取当前页面所需维保类型数据
      this.getMaintainTypeData();
      // 获取巡查类型数据
      if (this.$route.query.type == 'edit') {
        const fromId = this.$route.query.id
        this.maintainProjectId = fromId;
        this.myForm.id = fromId;
        this.getMaintainProjectData(fromId);
        this.title = '编辑维保项';
        this.type = this.$route.query.type;
      }
    },
    methods: {
      // 获取页面所需数据
      getMaintainProjectData(id) {
        getMaintainProjectDetail({id: id}).then((data) => {
          this.myForm = data.data.data;
        }).catch((err) => {
          this.$message.warning('查询失败');
        })
      },

      // 获取当前页面所需维保类型数据
      getMaintainTypeData() {
        getMaintainType({}).then((data) => {
          let info = data.data.data;
          let itemArr = [];
          info.forEach(function (i, e) {
            // if (e < 4) {
            itemArr.push({'name': i.name, 'id': i.id})
            // }
          })
          this.itemArr = itemArr;
        }).catch((err) => {
          this.$message.warning('查询维保类型数据失败');
        })
      },

      // 编辑/添加维保项目记录提交
      upMaintainProject() {
        let reqData = this.myForm;
        if (this.type == 'add') {
          delete reqData['id'];
          maintainItemAdd(reqData).then((res) => {
            com.mask()
            this.axioThen(this);
          }).catch((err) => {
            this.$message.warning('操作失败');
          })
        } else {
          maintainItemEdit(reqData).then((res) => {
            com.mask()
            this.axioThen(this);
          }).catch((err) => {
            this.$message.warning('操作失败');
          })
        }
      },

      // 編輯/添加維保項目請求成功後的操作
      axioThen(self) {
        self.$message.success({
          message: '操作成功',
          duration: 1500,
          onClose: () => {
            com.unmask()
            self.$router.push('/manage/maintainMgr/maintainProjectMgr')
          }
        });
      },

      // 返回上一级
      back() {
        this.$router.go(-1);
      },
    }
  };
</script>
